<template>
  <div class="own-risk-container risk">
    <EmptyIndex :isEmpty="Object.keys(data || {}).length">
      <template #listCon>
        <p class="total-info">
          共<span class="total">{{ data.count }}</span
          >条符合条件的{{ title }}信息
        </p>
        <div
          class="risk-sector"
          v-for="(item, parentIndex) in data.list"
          :key="parentIndex"
        >
          <div class="risk-sector-title">
            <span>{{ item.title }}</span>
            <span :class="[item.tag == '高风险' ? 'serious' : 'warning']">{{
              item.tag
            }}</span>
          </div>
          <div
            class="risk-sector-item"
            v-for="(n, childrenIndex) in reconfigurationJudicial(item)"
            :key="n.id"
          >
            <div
              class="risk-sector-item-title"
              @click.prevent="
                handleDetailsClick({
                  $event,
                  id: n.id,
                  type: n.type,
                  parentIndex,
                  childrenIndex,
                })
              "
            >
              <span
                >{{ n.title }}（<span class="total">{{ n.riskCount }}</span
                >）</span
              >
              <span
                :class="{
                  'rotate-active-icon': isShowDetails(
                    parentIndex,
                    childrenIndex
                  ),
                }"
              >
                <em class="iconfont icon-youjiantou" />
              </span>
            </div>
            <div v-if="isShowDetails(parentIndex, childrenIndex)">
              <DetailsIndex :detailsObj="detailsObj" :title="item.title" />
              <van-pagination
                v-if="detailsObj?.count > pageSize"
                v-model="pageNum"
                :total-items="detailsObj?.count"
                :items-per-page="pageSize"
                @change="handlePageChange"
              />
            </div>
          </div>
        </div>
      </template>
    </EmptyIndex>
  </div>
</template>

<script>
import EmptyIndex from "@/components/empty";
import DetailsIndex from "./DetailsIndex.vue";
import { getRiskDetailInfo, getRiskJudicialInfo } from "@/api";
import { Toast } from "@/utils";

//司法协助-历史 类型
const RISK_TYPE_COLUMN_75 = 75;
export default {
  name: "RiskDetails",
  components: {
    EmptyIndex,
    DetailsIndex,
  },
  props: {
    data: {
      type: Object,
      default() {
        return {};
      },
    },
    title: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      list: [], //展示数据
      parentIndex: -1, //父级下标
      childrenIndex: -1, //子级下标
      isDisplay: false, //是否显示隐藏
      id: "", //详情id
      type: "", //详情类型
      pageNum: 1, //页码
      pageSize: 20, //每页显示的数量
      detailsObj: {}, //详情数据
      eventTarget: null, //事件对象
    };
  },
  watch: {
    title() {
      //切换栏目后，展开的数据重置
      this.isDisplay = false;
    },
  },
  methods: {
    /**
     * 请求风险详情数据
     */
    async getData() {
      try {
        Toast.startLoading();

        //请求数据
        this.detailsObj = await getRiskDetailInfo({
          id: this.id,
          type: this.type,
          pageNum: this.pageNum,
        });

        //设置当前元素滚动到列表容器可视区顶部
        this.eventTarget.scrollIntoView();
      } finally {
        Toast.closeLoading();
      }
    },

    /**
     * 查询司法协助-历史信息
     * @param {*} companyName 公司名称
     * @param {*} pageNum 页码
     */
    async queryJudicial(companyName, pageNum) {
      try {
        Toast.startLoading();

        //请求数据
        const { items = [], total } =
          (await getRiskJudicialInfo({
            companyName,
            pageNum,
          })) || {};

        //重构数据
        this.detailsObj = {
          type: RISK_TYPE_COLUMN_75, //司法-历史类型为75
          dataList: items,
          count: total,
        };

        //设置当前元素滚动到列表容器可视区顶部
        this.eventTarget.scrollIntoView();
      } finally {
        Toast.closeLoading();
      }
    },

    /**
     * 风险详情显示隐藏点击事件
     * @param {*} $event 事件对象
     * @param {*} id 详情id
     * @param {*} type 详情类型
     * @param {*} parentIndex 父级下标
     * @param {*} childrenIndex 子级下标
     */
    handleDetailsClick({ $event, id, type, parentIndex, childrenIndex } = {}) {
      //赋值
      this.eventTarget = $event.target;
      this.id = id;
      this.type = type;
      this.pageNum = 1;

      //数据置空
      this.detailsObj = {};

      //如果点击的是同一个风险详情，则取非（显示与隐藏），反之是别的风险详情就展示其信息
      this.isDisplay =
        !this.isCurrentClicked(parentIndex, childrenIndex) || !this.isDisplay;

      //显示风险详情时请求数据
      if (this.isDisplay) {
        this.getRiskDetailsData();
      }

      //赋值为当前点击的下标
      this.parentIndex = parentIndex;
      this.childrenIndex = childrenIndex;
    },

    /**
     * 页码事件
     * @param {*} pageNum 页码数
     */
    handlePageChange(pageNum) {
      //赋值
      this.pageNum = pageNum;

      //请求数据
      this.getRiskDetailsData();
    },

    /**
     * 获取风险详情数据
     */
    getRiskDetailsData() {
      //根据类型不同，请求接口也不同  75 司法协助-历史
      if (this.type == RISK_TYPE_COLUMN_75) {
        this.queryJudicial(this.$route.query.companyName, this.pageNum);
        return;
      }
      this.getData();
    },

    /**
     * 重构司法协助-历史数据
     * @param {*} obj 详情列表对象
     */
    reconfigurationJudicial(obj) {
      return obj.type == RISK_TYPE_COLUMN_75
        ? [
            {
              id: obj.list[0].id,
              type: obj.type,
              title: "该公司的司法历史协助数量",
              riskCount: obj.total,
            },
          ]
        : obj.list;
    },

    /**
     * 是否点击的是当前元素
     * @param {*} pIndex 父级下标
     * @param {*} cIndex 子级下标
     */
    isCurrentClicked(pIndex, cIndex) {
      return this.parentIndex == pIndex && this.childrenIndex == cIndex;
    },

    /**
     * 是否显示详情信息
     * @param {*} pIndex 父级下标
     * @param {*} cIndex 子级下标
     */
    isShowDetails(pIndex, cIndex) {
      return this.isDisplay && this.isCurrentClicked(pIndex, cIndex);
    },
  },
};
</script>